
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索框输入文字自动提示</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 150px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="form-inline">
			<div class="form-group">
				<select class="form-control" id="province">   </select>
			</div>
			<div class="form-group">
				<select class="form-control" id="city">
					<option>请选择城市</option>
				</select>
			</div>
			<div class="form-group">
				<select class="form-control" id="area">
					<option>请选择县城</option>
				</select>
			</div>
		</div>
	</div>
	<script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script type="text/html" id="areaTpl">
        <option>请选择县区</option>
        {{each area}}
            <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script>
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area = document.getElementById('area');
        //获取省份信息
        ajax({
            tpe: 'get',
            url: 'http://localhost:3000/province',
            success: function (data) {
                var html = template('provinceTpl',{province: data});
                province.innerHTML = html;
              }
        });
        //为省份的下拉框添加至改变事件
        province.onchange = function () {
            //获取省份id
            var pid = this.value;

            //清空县区下拉框数据
            var html = template('areaTpl',{area:[]});
            area.innerHTML = html;
            //根据身份id获取城市信息
            ajax({
                type:'get',
                url:'/cities',
                data:{
                    id:pid
                },
                success:function(data){
                    var html = template('cityTpl',{city:data});
                    city.innerHTML = html;
                }
            })
          }
          //当用户选择城市的时候
          city.onchange = function () {
              var cid = this.value;
              ajax({
                  type:'get',
                  url:'/areas',
                  data:{
                      id:cid
                  },
                  success:function(data){
                    var html = template('areaTpl',{area:data});
                    area.innerHTML = html;
                  }
              })
            }
    </script>
</body>
</html>